

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
	<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

	<meta name="description" content=" 		Click the Date entry field to display a calendar. Note that you can choose the time at the bottom of the calendar. 		In the calendar, select a date by clicking twice on it. 		The results are inserted in the following format: 		Abbreviated day of the week, Abbreviated month, Day, Year [Hour:Minute AM/PM] 		The calendar supports navigation using the keyboard. ">
	<meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools">
	<title>Zapatec DHTML Calendar Widget - Double Click, with Time</title>

	<!-- Common JS files -->
	<script type='text/javascript' src='../../utils/zapatec.js'></script>

	<!-- Custom includes -->	
		<!-- import the calendar script -->
		<script type='text/javascript' src='../../utils/zpdict.js'></script>
		<script type="text/javascript" src="../../utils/lang/zpdate-en.js"></script>
		<script type="text/javascript" src="../../utils/zpdate.js"></script>
		<script type="text/javascript" src="../src/calendar.js"></script>

		<!-- other languages might be available in the lang directory; please check
		your distribution archive. -->


	<!-- ALL demos need these css -->
	<link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css">
	<link href="../../website/css/template.css" rel="stylesheet" type="text/css">
	<style type="text/css">
		body {
			width: 778px;
		}
	</style>

	<!-- Theme css -->
	<link href="../themes/bluexp.css" rel="stylesheet" type="text/css">

	<link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico">
	


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Double Click, with Time</div>

		<div class='zpCalDemoText'>
			<ul>
				<li>This demo uses the <b>bluexp theme</b>.</li>
				
		<li>Click the Date entry field to display a calendar. Note that you can choose the time at the bottom of the calendar.</li>
		<li>In the calendar, select a date by <strong>clicking twice</strong> on it.</li>
		<li>The results are inserted in the following format:<br/>
		Abbreviated day of the week, Abbreviated month, Day, Year [Hour:Minute AM/PM]</li>
		<li>The calendar supports navigation using the keyboard.</li>

			</ul>
		</div>


<b>Date:</b>
<input type="text" name="date2" id="sel2" size="30">

		<script type="text/javascript">
		var cal = new Zapatec.Calendar({
		
		inputField     :    "sel2",     // id of the input field
		eventName      :    "focus",
		singleClick    :     false,     // require two clicks to submit
		ifFormat       :    '%a, %b %e, %Y [%I:%M %p]',     // format of the input field
		showsTime      :     true,     // show time as well as date
		theme          :    "bluexp"	// theme

		});
		
		
	</script>

	<noscript>
		<br/>
		This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'>
		AJAX Component</a> - Zapatec DHTML Calendar Widget, but your browser does not support Javascript.
		<br/>
		<br/>
	</noscript>
		<br/><br/><br/>
		<div class="footer" style='width: 778px; text-align:center; margin-top:2em'>
		&copy; 2004-2009 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong>
		</div>
</body>
</html>
